<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>转换</title>
	</head>
	<style type="text/css">
		.box{
			/* 盒子摆放在body的正中间 */
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 300px;
			height: 300px;
			background-color: aqua;
			/* transform: translatex(50%) translateY(-50%); */
		}
		.box2{
			width: 200px;
			height: 200px;
			background-color: crimson;
			margin:50px auto;
			transition: all 2s linear;
			 /* transform-origin: 转换的中心点
			方位词:水平方向(left,center,right) 垂直方向(top,center,bottom); */
			transform-origin: left top; 
		}
		.box2:hover{
		/* 	scale()：缩放 */
		/* deg:度 */
		/* rotate():旋转 deg度 正数顺时针 负数逆时针 */
		/* skew():倾斜 deg度 */
		 	 transform : scale(2,.5);
			/* transform: rotatey(-45deg); */
			/* transform: skewy(45deg); */
		}
	</style>
	<body>
		<div class="box">
			
		</div>
		<div class="box2"></div>
	</body>
</html>
